<template>
	<view>
		<view class="contact">
			<view class="contact_top">充值方式</view>
			<view class="contact_key">
				<view class="fl">
					<image src="../../static/iocn32.png"></image>
					<text>微信支付</text>
				</view>
				<!-- <view class="fr"><image src="../../static/iocn26.png"></image></view> -->
			</view>
			<!-- <view class="contact_key">
				<view class="fl">
					<image src="../../static/iocn33.png"></image>
					<text>支付宝支付</text>
				</view>
				<view class="fr"><image src="../../static/iocn26.png"></image></view>
			</view> -->

			<view class="contact_box">
				<text>充值金额</text>
				<view>
					<image src="../../static/iocn34.png"></image>
					<input type="text" v-model="totalFee" placeholder="00.00" />
				</view>
			</view>
		</view>
		<view class="footer" @click="CreateTrade()">确认充值</view>
	</view>
</template>

<script>
	import {
		CreateTrade,
		MiniProgramPay
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				totalFee: '',
				payDestination: 1,
				canInvoiced: false
			};
		},
		methods: {
			// 创建交易订单
			async CreateTrade() {
				var payerUserId = getValue('id')
				var amount = this.totalFee
				var payDestination = this.payDestination
				var canInvoiced = this.canInvoiced
				var payType = 2
				if (amount == '') {
					uni.showToast({
						title: "充值金额不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				try {
					const {
						data: res
					} = await CreateTrade({
						payerUserId,
						amount,
						payDestination,
						canInvoiced,
						payType
					})
					this.MiniProgramPay(res.result.data.tradeNumber)
				} catch (e) {}
			},
			async MiniProgramPay(res) {
				var outTradeNo = res
				var body = 'string'
				var totalFee = JSON.parse(this.totalFee * 100)
				var spBillCreateIp = '127.0.0.1'
				var notifyUrl = 'https://pay.syh56.com:44352/api/WeChatPayNotify/Unifiedorder'
				var tradeType = 'JSAPI'
				var openId = getValue('wxOpenId')
				uni.request({
					url: "https://pay.syh56.com:44352/api/WeChatPay/MiniProgramPay",
					method: "post",
					header: {
						'Abp.TenantId': '1',
						'Content-Type': "application/json",
					},
					data: {
						outTradeNo,
						body,
						totalFee,
						spBillCreateIp,
						notifyUrl,
						tradeType,
						openId
					},
					success: (res) => {
					var parameter = JSON.parse(res.data.parameter)
						this.doWxPay(parameter)
					}
				})
			},
			
			
			doWxPay(parameter) {
				var param = parameter
				//小程序发起微信支付
				uni.requestPayment({
					nonceStr: param.nonceStr,
					timeStamp: param.timeStamp, //记住，这边的timeStamp一定要是字符串类型的，不然会报错
					// out_trade_no: param.out_trade_no,
					appId: param.appId,
					package: param.package,
					signType: param.signType,
					paySign: param.paySign,
					success: function(event) {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000
						});
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/PersonalCenter/index',
							})
						}, 2000)
					},
					fail: function(error) {
						// let id = 1
						uni.showToast({
							title: '支付失败',
							icon: 'error',
							duration: 2000
						});
					},
					complete: function() {
						console.log("pay complete")
					}
				});
			},
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 20upx 15upx;
	}

	.contact {
		width: 100%;
		opacity: 1;
		border-radius: 17.52upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc, 1.75upx 1.75upx 7.01upx 0px #cccccc;
		margin: 0 auto;

		.contact_top {
			padding: 40upx;
			font-size: 35upx;
			font-weight: bold;
		}

		.contact_key {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 0 30upx;
			height: 90upx;
			border-bottom: 1upx solid #e5e5e5;

			.fl {
				display: flex;
				align-items: center;

				image {
					width: 40upx;
					height: 40upx;
				}

				text {
					font-size: 31upx;
					padding-left: 12upx;
					font-weight: bold;
				}
			}

			.fr {
				image {
					width: 28upx;
					height: 28upx;
				}
			}
		}

		.contact_box {
			padding: 40upx;

			text {
				display: block;
				font-size: 35upx;
				font-weight: bold;
			}

			view {
				display: flex;
				align-items: center;
				padding-top: 40upx;

				image {
					width: 40upx;
					height: 40upx;
				}

				input {
					font-size: 38upx;
					font-weight: bold;
					padding-left: 10upx;
				}
			}
		}
	}

	.footer {
		width: 648upx;
		height: 72upx;
		text-align: center;
		line-height: 72upx;
		border-radius: 20upx;
		margin: 0 auto;
		margin-top: 30upx;
		color: #fff;
		background-color: #EF4D3D;
		font-size: 32upx;
		font-weight: bold;
	}
</style>
